<template>
    <div>
        <div class="statistics">
            <span class="title">丨数据统计</span>
            <div class="units">
                <span>用户总注册量：<strong>{{userData.allPerson}}</strong>人</span>
                <span>今日新增：<strong>{{userData.todayPerson}}</strong>人</span>
            </div>
           
        </div>

        <!-- 搜索 -->
        <div class="search_list">
            <div class="search_out">
                <span class="han_text">姓名</span>
                <el-input v-model="name" placeholder="请输入关键字"/>
            </div>
            
            <el-button  type="primary" icon="el-icon-search" @click="searchName">搜索</el-button>
        </div>

         <!-- 列表 -->
       
            <el-table :data="showList" stripe style="width: 100%">
                <el-table-column prop="user" label="用户账号"></el-table-column>
                <el-table-column prop="name" label="真实姓名"></el-table-column>
                <el-table-column prop="sex" label="性别">
                     <template slot-scope="scope">{{scope.row.sex === 'women'?'女':'男'}}</template>
                </el-table-column>
                <el-table-column prop="birthDay" label="生日"></el-table-column>
                <el-table-column prop="card" label="是否实名">
                    <template slot-scope="scope">{{scope.row.name!==''&&scope.row.card!==''?'是':'否'}}</template>
                </el-table-column>
                 <el-table-column prop="loginTime" label="注册时间">
                       <template slot-scope="scope">{{$getDate(scope.row.loginTime)}}</template>
                 </el-table-column>
                 <el-table-column prop="status" label="操作">
                    <template slot-scope="scope">
                            <el-button type="text" size="mini" @click="joinBlack(scope.row.user)">{{scope.row.status === 'ok'?'加入黑名单':'移除黑名单'}}</el-button>
                    </template>
                </el-table-column>  
            </el-table>
           
            <el-pagination
                background
                layout="prev, pager, next,total"
                :page-size="pageSize"
                :current-page="currentPage"
                :total="list.length" 
                @current-change="handleCurrentChange">
            </el-pagination>

    </div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
    data(){
        return { 
            name:'',
            list:[],//总数据
            showList:[],//展示数据
            pageSize:10,
            currentPage:1
           
        }
    },
    computed:{...mapState(['userData'])},
    mounted(){

        //调用仓库方法 实时获取用户统计数据
        this.initData();

        //页面初始化获取用户列表数据
        this.setList()
    },
    methods:{

        ...mapActions(['initData']),

        //获取用户列表数据
        setList(){
            this.$httpAxios(this.$api.USER_LIST(),res=>{
                // 设置总数据
                this.list = res.data;

                // 设置列表展示数据
                this.setShowList()
            })
        },

        // 设置列表展示数据
        setShowList(){
            // 拿到当前页面，拿到每页展示条数
            const {currentPage,pageSize} = this;
            // 拿到总数据
            const sours = [...this.list];  

            // 根据页码及展示条数计算 设置列表展示数据
            this.showList = sours.splice((currentPage-1)*pageSize,pageSize)
        },

        // 点击分页器会触发该函数，获取当前页码
        handleCurrentChange(currentPage) {
            // 更新当前页码
            this.currentPage = currentPage;
            // 更新列表展示数据
            this.setShowList()
        },

        // 设置黑名单
        joinBlack(user){
             this.$confirm('您确定要对当前用户账号'+user+'进行设置吗', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'})
                .then(() => this.$httpAxios(this.$api.USER_EDIT({user}),res=>{
                    // 加入弹层提示
                    this.$message.success(res.msg); 
                    // 设置总数据
                    this.list = res.data
                    // 重置页码
                    this.currentPage = 1;
                    // 设置列表展示数据
                    this.setShowList()
                }))
                .catch(() => this.$message.info('已取消'))
           
        },
        // 模糊搜索
        searchName(){
            const {$httpAxios,$api,name} = this;

             $httpAxios($api.USER_SEARCH({name}),res=>{
                // 设置总数据
                this.list = res.data
                // 重置页码
                this.currentPage = 1;
                // 设置列表展示数据
                this.setShowList()
            })
        }
    }

}

</script>
<style scoped>
.statistics{
    background: #F9F8F8;
    padding: 10px;
    
}
.title{
    height: 30px;
    font-size: 15px;
    font-weight: 600;
    color: #539EB7;
}
.units{
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
}
.units span{
    color: #444;
    float: left;
    margin-right: 15px;
}

.units strong{
    padding: 0 5px;
    font-size: 20px;
}
</style>
